<template>
    <div class="zsfxbox">
        <div class="dbtitle">长势情况对比：</div>
        <div class="zsfxtoptab">
            <div class="item" style="padding-left: 130px;">作物品种：{{info.cropName}}，{{info.cropSeriesName}}</div>
            <div class="item" v-if="info.xuntianAnalysisWapperRsp">
                播种时间：{{formatDateDD(info.xuntianAnalysisWapperRsp.bozhongTime)}}
            </div>
            <div class="item" v-if="info.xuntianAnalysisWapperRsp">
                长势周期：
                {{formatDateDD(info.xuntianAnalysisWapperRsp.taskStartTime)}}-{{formatDateDD(info.xuntianAnalysisWapperRsp.taskEndTime)}}
            </div>
        </div>
        <div class="colorTips">
            <span>过旺</span>
            <i></i>
            <i style="background: #04AE70;"></i>
            <i style="background: #79C29C;"></i>
            <i style="background: #D31931;"></i>
            <span style="margin: 0 0 0 8px;">差</span>
        </div>
        <ul class="zsfxlist">
            <li class="zftitle">
                <div class="item yueItem"></div>
                <template v-for="(dt,index) in years" :key="dt">
                    <div class="item jdf" v-if="index<3"><div class="nianfen">{{dt}}年</div></div>
                </template>
                
                <!-- <template v-if="years.length<3">
                    <div class="item jdf" v-for="n in (3-years.length)"><div class="nianfen zwf"></div></div>
                </template> -->
                <!-- <div class="item jdf"><div class="nianfen">2022年</div></div>
                <div class="item jdf"><div class="nianfen">2021年</div></div> -->
            </li>
            <li v-for="dt in lineList" :key="dt.month">
                <div class="item yueItem">
                    <div class="yunaq"></div>
                    <div class="zsfxconbox">
                        <div class="yue">{{dt.month}}月</div>
                    </div>
                </div>
                <template v-for="(nian,index) in years" :key="dt">
                    <div class="item jdf" v-if="dt.listObj[nian]">
                        <div class="zsfxconbox" :class="`zsfxconbox${years.length}`">
                            <div class="fxSubItemBox">
                                <template v-for="(dt2,index) in dt.listObj[nian]">
                                    <template v-if="index<3">
                                        <div class="fxdataBox" :style="`background: ${dt2.xuntianColor};`" :title="dt2.shengyuqiName">
                                            <p><em>{{dt2.operationDay}}号</em><span>{{dt2.shengyuqiName}}</span></p>
                                            <p><span>{{dt2.mapAreaSize}}(亩)</span></p>
                                        </div>
                                    </template>
                                </template>
                            </div>
                            <div class="fxSubItemBox" style="padding-top: 0;">
                                <template v-for="(dt2,index) in dt.listObj[nian]">
                                    <template v-if="index>=3 && index<6">
                                        <div class="fxdataBox" :style="`background: ${dt2.xuntianColor};`" :title="dt2.shengyuqiName">
                                            <p><em>{{dt2.operationDay}}号</em><span>{{dt2.shengyuqiName}}</span></p>
                                            <p><span>{{dt2.mapAreaSize}}(亩)</span></p>
                                        </div>
                                    </template>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="item jdf" v-else><div class="zsfxconbox"></div></div>
                </template>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { formatDate,formatDateDD } from '@/utils/format'

const props = defineProps({
    list: {
        type: Array,
        default: [],
    },
    info: {
        type: Object,
        default: null
    }
})

const years = ref([])
let month = []
const lineList = ref([]) // [{month:'1',listObj:{2023:[...],2022:[...]}}]
let yearMonthData = []

watch(()=>props.list,(newData,oldData)=>{
    if(!newData) return;
    years.value = []
    month = []
    yearMonthData = []
    lineList.value = []
    const lineItem = {}
    //console.log("GGGG:",newData)
    newData.forEach(item1 =>{
        if(years.value.length<3){ // 只显示3个
            years.value.push(item1.year)
        }
        // 循环取出所有月份
        item1.xuntianAnalysisMonthList.forEach(item2 =>{
            const smt = month.find(ele=>ele == item2.month)
            if(!smt){ // 不存在，则添加
                month.push(item2.month)
            }
            // 保存每年的每个月的数据
            yearMonthData.push({
               [item1.year]:item1.year,
               [item2.month]:item2.xuntianRecordRspList
            })
        })
    })
    month = month.sort() // 从小到大排序
    console.log("month:",month)
    //console.log("yearMonthData:",yearMonthData)
    
    // 以月为对象组装行数据
    month.forEach(item =>{
        // 查找年份下当前月份（item）的数据
        // 形式：{month:'1',listObj:{2023:[...],2022:[...]}}
        let obj = {
            month:item,
            listObj:{}
        }
        // 查找所有年份下，月份为item的数据
        newData.forEach(item4 =>{
            item4.xuntianAnalysisMonthList.forEach(item5 =>{
                if(item5.month == item){
                    // 判断当前月份是否已经在lineList中
                    const lfIndex = lineList.value.findIndex(it =>it.month==item5.month)
                    if(lfIndex>-1){
                        lineList.value[lfIndex]['listObj'][item4.year] = item5.xuntianRecordRspList
                    }else{
                        obj.listObj[item4.year] = item5.xuntianRecordRspList
                        lineList.value.push(obj)
                    }
                }
            })  
        })
    })

    console.log("lineList:",lineList.value)
    
    // newData.forEach(item =>{
    //     years.value.push(item.year)
    //     lineItem[item.year] = item.xuntianAnalysisMonthList  // 以年份作为key，
    //     lineList.value.push(lineItem)
    // })
    // console.log("fffff:",lineList.value)
})
</script>
<style lang="scss" scoped>
.zsfxbox{
    position: relative;
    z-index: 10;
    .dbtitle{
        display: flex;
        align-items: center;
        position: absolute;
        z-index: 10;
        left: -32px;
        top: 38px;
        font-size: 20px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #333333;
        &::before{
            content: '';
            display: block;
            width: 8px;
            height: 21px;
            background: #85C225;
            margin: 0 5px 0 0;
        }
    }
    .zsfxtoptab{
        display: flex;
        padding: 40px 0 0 0;
        .item{
            flex: 1;
            height: 24px;
            font-size: 18px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: left;
        }
    }
    .colorTips{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0 0 0;
        span{
            font-size: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #333333;
            margin: 0 8px 0 0;
        }
        i{
            width: 32px;
            height: 16px;
            background: #15886E;
        }
    }
    .zsfxlist{
        list-style: none;
        padding: 0;
        margin: 0;
        li{
            display: flex;
            .jdf{
                flex: 1;
            }
            &:nth-child(2n+1){
                .item{
                    .zsfxconbox{
                        background: rgba(16, 178, 119,0.06);
                    } 
                }
            }
            &.zftitle{
                line-height: normal;
                padding: 30px 0 25px 0;
                .item{
                    height: auto;
                    text-align: center;
                    &+.item{
                        border-left: 0;
                    }
                    .zsfxconbox{
                        background: none;
                    }
                    .nianfen{
                        display: inline-block;
                        position: relative;
                        z-index: 10;
                        font-size: 24px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        color: #333333;
                        &::after{
                            content: '';
                            display: inline-block;
                            position: absolute;
                            z-index: 10;
                            left: 0;
                            bottom: 0;
                            height: 6px;
                            width: 84px;
                            background: url(/src/style/images/rp6-1.png) left top no-repeat;
                        }
                        &.zwf{
                            &::after{
                                content: none;
                            }
                        }
                    }
                }
            }
            .item{
                box-sizing: border-box;
                height: 122px;
                padding: 0 0 2px 0;
                &+.item{
                    border-left: 2px solid rgba(182,182,182,0.3);
                }
                &.yueItem{
                    position: relative;
                    z-index: 10;
                    width: 100px;
                    .zsfxconbox{
                        padding: 23px 0 0 0;
                        background: none!important;
                    }
                    &+.item{
                        border: 0;
                    }
                    .yunaq{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: absolute;
                        z-index: 10;
                        right: -12px;
                        top: 24px;
                        width: 26px;
                        height: 26px;
                        background: rgba(4, 174, 112,0.1);
                        border-radius: 50%;
                        &::before{
                            content: '';
                            display: block;
                            width: 13px;
                            height: 13px;
                            background: #04AE70;
                            border-radius: 50%;
                        }
                    }
                }
                .zsfxconbox{
                    box-sizing: border-box;
                    width: 100%;
                    height: 100%;
                    background: rgba(16, 178, 119,0.15);
                    &.zsfxconbox2{
                        .fxdataBox{
                            width: 142px!important;
                        }
                    }
                    &.zsfxconbox1{
                        .fxdataBox{
                            width: 295px!important;
                        }
                    }
                    .yue{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 56px;
                        height: 32px;
                        background: linear-gradient(43deg, #57CDA2 0%, #04AE70 100%);
                        box-shadow: 0px 4px 8px 0px rgba(32,184,129,0.3);
                        border-radius: 16px;
                        font-size: 20px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        color: #FFFFFF;
                        margin: 0;
                    }
                    .fxSubItemBox{
                        display: flex;
                        box-sizing: border-box;
                        padding: 13px 0 0 19px;
                        .fxdataBox{
                            box-sizing: border-box;
                            width: 89px;
                            height: 40px;
                            padding:4px 6px 6px 6px;
                            background: #04AE70;
                            border-radius: 6px;
                            font-size: 12px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            color: #FFFFFF;
                            margin: 5px 0 0 0;
                            &+.fxdataBox{
                                margin-left: 5px;
                            }
                            p{
                                display: flex;
                                padding: 0;
                                margin: 0;
                                em{
                                    font-style: normal;
                                    flex-shrink: 0;
                                }
                                span{
                                    display: block;
                                    flex: 1;
                                    text-align: right;
                                    flex-shrink: 0;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                    word-break: break-all;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>